<template>
  <el-dialog title="添加学生信息" :visible.sync="visible" width="1000px" append-to-body :before-close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker clearable
                            v-model="form.birthday"
                            type="date" style="width: 100%"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择生日">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100%">
              <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学习目标" prop="studyTarget">
            <el-input v-model="form.studyTarget" placeholder="请输入学习目标" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人" prop="guardian">
            <el-input v-model="form.guardian" placeholder="请输入监护人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="guardianPhone">
            <el-input v-model="form.guardianPhone" placeholder="请输入监护人电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addStudent, listStudent, updateStudent } from '@/api/edu/student'

export default {
  name: 'SelectStudentDialog',
  dicts: ['sys_user_sex'],
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        guardian: [
          { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        guardianPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        gender: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        studyTarget: [
          { required: true, message: "学习目标不能为空", trigger: "blur" }
        ],
      },
    }
  },
  methods: {

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addStudent(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$emit('addSuccess', response.data)
            this.$emit('update:visible', false)
            this.reset()
          });
        }
      });
    },
    cancel() {
      this.reset()
      this.$emit('update:visible', false)
    },
    reset() {
      this.form = {
        name: null,
        id: null,
        birthday: null,
        gender: null,
        guardian: null,
        guardianPhone: null,
        tag: null,
        studyTarget: null,
        avatar: null,
        remark: null,
        tenantId: null,
        tenantName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        startTime: null,
        endTime: null
      };
      this.resetForm("form");

    },
    // 关键修复：处理右上角关闭按钮
    handleClose(done) {
      this.reset()
      this.$emit('update:visible', false);
      done()
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: center;
}
</style>
